<template>
	<view>
		<u-tag style="width: 20%;margin: 1%;text-align:center;" :text="im" shape="circle" type="success" v-for="im of inMoney" @click="add(im)" />

		<u-form-item label="充值金额" labelWidth="70px"><u-input v-model="cardIn.inMoney" type="textarea" :border="true" /></u-form-item>

		<view class="u-m-t-20">
			<u-cell-group><u-cell-item icon="rmb-circle" title="支付方式     银行卡2379" @click="onPageTo('/pages/card/cardIn')"></u-cell-item></u-cell-group>
		</view>
		<u-button type="primary" @click="showPop(true)">支付</u-button>

		<u-keyboard
			default=""
			ref="uKeyboard"
			mode="number"
			:mask="true"
			:mask-close-able="false"
			:dot-enabled="false"
			v-model="show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace"
		>
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{ cardIn.inMoney }}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)"><u-icon name="close" color="#333333" size="28"></u-icon></view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
export default {
	onLoad(id) {
		this.card.id = id.id;
	},
	data() {
		return {
			show: false,
			password: '',
			cardIn: {
				inMachineId: 4,
				inMoney: null,
				card: null
			},
			card: {
				id: 1,
				cardNum: null,
				cardMoney: null,
				student: {
					studentNumber: null,
					name: null
				}
			},
			inMoney: [1, 2, 5, 10, 20, 50, 100, 200]
		};
	},
	methods: {
		add(im) {
			this.cardIn.inMoney = im;
		},
		submit() {
			this.cardIn.card = this.card;
			this.$axios({
				method: 'post',
				url: '/api/card/inMoney',
				data: this.cardIn
			}).then(r => {
				console.log(r);
				if (r.data.code == 200) {
					uni.hideLoading();
					this.show = false;
					uni.showToast({
						icon: 'success',
						title: '充值成功'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				} else if (r.data.code == 800) {
					uni.hideLoading();
					this.show = false;
					uni.showToast({
						icon: 'error',
						title: '金额参数错误'
					});
				} else {
					this.show = false;
				}
			});
		},
		onChange(val) {
			if (this.password.length < 6) {
				this.password += val;
			}
			if (this.password.length >= 6) {
				this.pay();
			}
		},
		onBackspace(e) {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		},
		pay() {
			this.submit();
			uni.showLoading({
				title: '支付中'
			});
		},
		showPop(flag = true) {
			this.password = '';
			this.show = flag;
		},
		finish() {
			console.log(11111);
		}
	}
};
</script>

<style>
.money {
	font-size: 80rpx;
	color: $u-type-warning;
	position: relative;

	.close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		line-height: 28rpx;
		font-size: 28rpx;
	}
}
.tips {
	color: $u-tips-color;
}
</style>
